<!--
 * @Author: 肖芬芳 10547202+xiao-fenfang@user.noreply.gitee.com
 * @Date: 2022-07-20 08:52:17
 * @LastEditors: 肖芬芳 1911683843@qq.com
 * @LastEditTime: 2022-12-13 16:20:39
 * @FilePath: \vue-api-serverc:\Users\Administrator\Desktop\vite-project\src\components\form\search\Search.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="form-search">
    <div v-if="formItem && formItem.length > 0" class="form-search-input">
      <el-form
        ref="form"
        :inline="true"
        :model="searchFormData"
        class="aw-form"
      >
        <el-row>
          <el-col
            v-for="(item, index) in formItem"
            :key="index"
            :span="item.width"
          >
            <el-form-item :key="index" :label="item.label" :prop="item.value">
              <el-input
                v-if="item.type === 'text'"
                v-model="searchFormData[item.value]"
                clearable
                placeholder="请输入"
                :maxlength="item.maxlength"
              >
              </el-input>
              <el-select
                v-if="item.type === 'select' && item.template == 0"
                v-model="searchFormData[item.value]"
                clearable
                placeholder="请输入"
              >
                <el-option
                  v-for="(option, i) in item.children"
                  :label="option.label"
                  :value="option.value"
                  :key="i"
                />
              </el-select>

              <el-date-picker
                v-if="item.type == 'time'"
                v-model="searchFormData[item.value]"
                type="date"
                placeholder="选择日期"
              />
              <slot
                name="selector"
                v-if="item.type === 'select' && item.template == 1"
              >
              </slot>
            </el-form-item>
          </el-col>
          <el-button @click="searchForm()" type="primary">查询</el-button>
          <el-button v-if="resetBtn" @click="clearForm(form)">重置</el-button>
          <el-button v-if="addBtn" @click="addData" type="primary"
            >新增</el-button
          >
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getCurrentInstance, ref, reactive, onMounted } from "vue";
import {
  FormInstance, // 获取表单对象
} from "element-plus";
const { proxy } = getCurrentInstance() as any;

// defineProps({
//   formData: {
//     type: Object,
//     default: () => {},
//   },
//   formItem: {
//     type: Array,
//     default: () => [],
//   },
//   addBtn: {
//     type: Boolean,
//     default: false,
//   },
//   resetBtn: {
//     type: Boolean,
//     default: false,
//   },
// });

interface Props {
  formData: {
    type: Object;
    default: () => {};
  };
  formItem: any;
  addBtn: {
    type: Boolean;
    default: false;
  };
  resetBtn: {
    type: Boolean;
    default: false;
  };
}

const props = withDefaults(defineProps<Props>(), {});

const form = ref<FormInstance>();

const searchFormData = reactive(proxy.formData);

const emit = defineEmits(["searchForm", "clearForm", "addData"]);
const searchForm = () => {
  emit("searchForm");
};
const clearForm = (form: FormInstance | undefined) => {
  if (!form) return;
  form.resetFields();
  emit("clearForm");
};
const addData = () => {
  emit("addData");
};
</script>

<style lang="scss">
</style>
